<template>
  <!-- 搜索条件 -->
  <view class="w-750rpx m-a flex-sb-center pl-32rpx pr-32rpx pt-30rpx pb-30rpx box-border">
    <view class="search-wrap w-225rpx h-64rpx flex-sb-center bg-white rounded-full box-border"
      :class="[{ 'dark-color2': themeConfig.theme === 'dark' }, searchWrapClass]"
    >
      <view class="flex-center" @click="handleSearch">
        <i class="iconfont icon-sousuo font-size-34rpx ml-10rpx color-#BBB"></i>
      </view>
      <view class="w-130rpx relative input-box"
        :class="[inputWrapClass]"
      >
        <wd-input 
          class="w-full !h-60rpx" 
          type="text" 
          v-model="searchValue" 
          :placeholder="placeholder" 
          @blur="handleInputChange"
          @confirm="handleConfirm"
        />
      </view>
    </view>
    <view class="w-445rpx h-64rpx px-22rpx flex-sb-center search-btn bg-#fff rounded-60rpx box-border search-wrap"
      :class="[{ 'dark-color2': themeConfig.theme === 'dark' }]"
    >
      <view class="color-#9C6DEF flex-center" v-if="filterStr">
        <i class="iconfont icon-close font-size-22rpx ml-10rpx inline-block"></i>
        <wd-text text="清空筛选" color="#9C6DEF" size="24rpx" @click="handleClear"></wd-text>
        <text class="ml-10rpx color-#666 font-size-24rpx ellipsis max-w-150rpx">{{ filterStr }}</text>
      </view>
      <view class="color-#676565 font-size-28rpx flex-center" v-else>请选择条件进行筛选</view>
      <view class="flex-center" @click="handleFilter">
        <i class="iconfont icon-shaixuan font-size-30rpx mr-4rpx color-#9C6DEF inline-block"></i>
        <text class="color-#9C6DEF font-size-28rpx">筛选</text>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { useThemeStore } from '@/store';
const emit = defineEmits([
  'handleFilter', 'handleSearch', 
  'handleConfirm', 'handleClear',
  'handleChange'
])
const props = defineProps({
  searchWrapClass: {
    type: String,
    default: 'pl-66rpx pr-66rpx'
  },
  inputWrapClass: {
    type: String,
    default: ''
  },
  placeholder: {
    type: String,
    default: '搜索ID'
  },
  filterStr: {
    type: String,
    default: ''
  },
  pagination: {
    type: Object,
    default: () => ({})
  },
})
// 主题颜色
const { themeConfig } = useThemeStore();

// 搜索框值
const searchValue = ref('');
const handleFilter = () => {
  emit('handleFilter', searchValue.value)
}
const handleSearch = () => {
  emit('handleSearch', searchValue.value)
}
const handleConfirm = () => {
  emit('handleConfirm', searchValue.value);
}
const handleInputChange = () => {
  emit('handleChange', searchValue.value);
}
const handleClear = () => {
  emit('handleClear');
}
const resetValue = () => {
  searchValue.value = '';
}
defineExpose({
  resetValue
})
</script>

<script lang="ts">
export default {
  // 微信小程序开启样式穿透
  options: { styleIsolation: "shared" },
};
</script>

<style lang="scss" scoped>
// 搜索框 start
.search-wrap {
  box-shadow: 0 4rpx 18rpx 0 rgba(0, 0, 0, 0.04);
}
:deep(.wd-input__inner),
:deep(.wd-input__value),
:deep(.wd-input__body) {
  height: 60rpx !important;
}
:deep(.wd-input::after) {
  background: none !important;
}
// 搜索框 end

.search-box {
  justify-content: flex-start !important;

  .search-wrap {
    width: 360rpx !important;
  }
}
</style>
